<template>
	<view class="content"> 
    <view>{{isReady ? 'TTS初始化完成' : '正在初始化...'}}</view>
    
    <!-- 语调 & 语速 & 合成文本 -->
    <view style="width: 700rpx;">
      <view style="height: 10rpx;"></view>
       <view class="uni-form-item uni-column">
          <view class="title">语调: </view>
          <slider max="9" min="0" :value="pitch" @change="onPicthChange" show-value></slider>
      </view>
      <view class="uni-form-item uni-column">
          <view class="title">语速: </view>
          <slider max="9" min="0" :value="speed" @change="onSpeedChange" show-value></slider>
      </view>
      <view class="uni-form-item uni-column">
       <view class="title">合成文本: </view>
       <input class="uni-input" v-model="text" />
      </view>
    </view>
    <view style="height: 20rpx;"></view>
    
    <!-- 引擎设置 -->
    <!-- 播放 -->
    <view style="display: flex;">
      <button class="title" size="mini" @click="showToast">Toast</button>
      <view style="width: 10rpx;"></view>
      <button class="title" size="mini" @click="init">Init TTS</button>
      <view style="width: 10rpx;"></view>
      <button class="title" size="mini" @click="play">播放</button>
      <view style="width: 10rpx;"></view>
      <button class="title" size="mini" @click="toTestTTS">测试系统TTS</button>
    </view>
	</view>
</template>

<script>
	const BaiduTTS = uni.requireNativePlugin('MT-TTS-Baidu');
  
	export default {
		data() {
			return {
				ttsList: [],
        ttsName: '',
        isReady: false,
        pitch: 5,
        speed: 5,
        ttsName: '',
        text: '请。112号、张三，到，C04、检查'
			}
		},
		onLoad() { },
    onUnload(){
      BaiduTTS.destroy();
    },
		methods: {
      toTestTTS(){
        uni.redirectTo({
          url: '/pages/index/index'
        })
      },
      showToast(){
        BaiduTTS.toast('toast test');
      },
      onPicthChange(e){
        console.log('>> onPicthChange')
        this.picth = e.detail.value;
      },
      onSpeedChange(e){
        console.log('>> onSpeedChange')
        this.speed = e.detail.value;
      },
			init(){
        console.log('>> TTS:init...')
        BaiduTTS.init({
          appId: '',
          appKey: '',
          secretKey: '',
          sn: '',
        }, (res) => {
          if(res === 0){
            this.isReady = true;
            console.log('>> tts: init success');
          }else{
            console.log('>> tts: init fail: ' + res)
          }
        });

				BaiduTTS.onDone((res) => {
					console.log(">> tts: play end " + res)
				});
			},
      play(){
        console.log('>> tts: play...');
        console.log('>> pitch: '+this.pitch)
        console.log('>> speed: '+this.speed)
        console.log('>> text: '+this.text)
        
        BaiduTTS.setPitch(this.pitch)
        BaiduTTS.setSpeed(this.speed)
        const res = BaiduTTS.speak(this.text);
        console.log('>> tts: play result = ' + res);
      }
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} 
  .tts-item {
    padding-bottom: 5rpx;
    border-bottom: 1px solid #3F536E;
  }
</style>
